<script setup>

import Login from "@/views/Login.vue";
import {useCounterStore} from "@/assets/js/counters.js";
import {onMounted} from "vue";

const counterStore = useCounterStore()

const init = ()=>{
    const login = localStorage.getItem("login");
    if (login){
        counterStore.isLogin = true;
    }
}
// 退出功能， 共享空间中的isLogin设置为false， 清除本地存储中的login
const logout = ()=>{
    counterStore.isLogin = false;
    localStorage.removeItem("login")
}

onMounted(()=>{
    init();
})
</script>

<template>
  <div v-if="counterStore.isLogin" class="container">
      <div class="title">
          <div><img style="width: 50px;height: 50px;" src="https://static.readdy.ai/image/8548aef715fc2f9d5090d7dbe1eac545/0e8c9b300aec4d734a395f598ed7c193.png" alt=""></div>
          <div>
              <el-menu mode="horizontal" :ellipsis="false">
                  <el-sub-menu >
                      <template #title>史努比</template>
                      <el-menu-item @click="logout">退出</el-menu-item>
                  </el-sub-menu>
              </el-menu>
          </div>
      </div>
      <div class="content">
          <div style="width: 200px">
              <el-menu  mode="vertical" :router="true">
                  <el-menu-item index="/">学生管理</el-menu-item>
                  <el-menu-item index="/product">产品管理</el-menu-item>
              </el-menu>
          </div>
          <div style="flex-grow: 1">
              <RouterView></RouterView>
          </div>
      </div>
  </div>

  <Login v-if="!counterStore.isLogin"></Login>
</template>

<style scoped>
.content{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.container{
    padding: 15px;
    box-sizing: border-box;
}
.title{
    height: 50px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid aliceblue;
  }
</style>